<template>
	<view class="user-data">
		<view class="user-data-item">
			<view class="user-data-tit">本日累计</view>
			<view class="user-data-list">
				<view>
					<view>活跃人数</view>
					<text>{{datas.today.succeed}}</text>
				</view>
				<view>
					<view>新增人数</view>
					<text class="orange">{{datas.today.all}}</text>
				</view>
			</view>
		</view>
		<view class="user-data-item">
			<view class="user-data-tit">昨日累计</view>
			<view class="user-data-list">
				<view>
					<view>活跃人数</view>
					<text>{{datas.yesterday.succeed}}</text>
				</view>
				<view>
					<view>新增人数</view>
					<text class="orange">{{datas.yesterday.all}}</text>
				</view>
			</view>
		</view>
		<view class="user-data-item">
			<view class="user-data-tit">本周累计</view>
			<view class="user-data-list">
				<view>
					<view>活跃人数</view>
					<text>{{datas.week.succeed}}</text>
				</view>
				<view>
					<view>新增人数</view>
					<text class="orange">{{datas.week.all}}</text>
				</view>
			</view>
		</view>
		<view class="user-data-item">
			<view class="user-data-tit">上周累计</view>
			<view class="user-data-list">
				<view>
					<view>活跃人数</view>
					<text>{{datas.last_week.succeed}}</text>
				</view>
				<view>
					<view>新增人数</view>
					<text class="orange">{{datas.last_week.all}}</text>
				</view>
			</view>
		</view>
		<view class="user-data-item">
			<view class="user-data-tit">本月累计</view>
			<view class="user-data-list">
				<view>
					<view>活跃人数</view>
					<text>{{datas.month.succeed}}</text>
				</view>
				<view>
					<view>新增人数</view>
					<text class="orange">{{datas.month.all}}</text>
				</view>
			</view>
		</view>
		<view class="user-data-item">
			<view class="user-data-tit">上月累计</view>
			<view class="user-data-list">
				<view>
					<view>活跃人数</view>
					<text>{{datas.last_month.succeed}}</text>
				</view>
				<view>
					<view>新增人数</view>
					<text class="orange">{{datas.last_month.all}}</text>
				</view>
			</view>
		</view>
		<view class="user-data-item">
			<view class="user-data-tit">本年累计</view>
			<view class="user-data-list">
				<view>
					<view>活跃人数</view>
					<text>{{datas.year.succeed}}</text>
				</view>
				<view>
					<view>新增人数</view>
					<text class="orange">{{datas.year.all}}</text>
				</view>
			</view>
		</view>
		<view class="user-data-item">
			<view class="user-data-tit">上年累计</view>
			<view class="user-data-list">
				<view>
					<view>活跃人数</view>
					<text>{{datas.last_year.succeed}}</text>
				</view>
				<view>
					<view>新增人数</view>
					<text class="orange">{{datas.last_year.all}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datas: {
					all: {},
					last_month: {},
					last_week: {},
					last_year: {},
					month: {},
					today: {},
					week: {},
					year: {},
					yesterday: {}
				}
			};
		},
		onShow() {
			this.init()
		},
		methods: {
			// 获取用户数据
			init(){
				let data = {
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					day: 5
				}
				this.$api.UserContrastData(data).then(res => {
					this.datas = res.datas
				})
			},
		}
	}
</script>

<style lang="scss">
	.user-data{
		padding-top: 20rpx;
		.user-data-item{
			margin-bottom: 20rpx;
			background-color: #FFF;
			padding: 30rpx 20rpx;
			.user-data-tit{
				font-size: 36rpx;
			}
			.user-data-list{
				padding: 50rpx 0 20rpx;
				display: flex;
				text-align: center;
				view{
					flex: 1;
					view{
						margin-bottom: 40rpx;
						font-size: 30rpx;
						color: #666;
					}
					text{
						font-weight: bold;
						font-size: 36rpx;
					}
				}
			}
			.user-data-rate{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 50rpx;
				padding: 0 30rpx;
				view{
					font-size: 30rpx;
					color: #666;
				}
				text{
					font-size: 36rpx;
					&.orange{
						color: #FE9B26;
					}
					&.blue{
						color: #2073F5;
					}
				}
			}
		}
	}
</style>
